<template>
  <div class="tree-container">
    <el-tree
      ref="tree"
      show-checkbox
      icon-class="custom"
      :props="defaultProps"
      :load="loadNode"
      lazy
      @check-change="handleNodeChange"
      @node-click="handleNodeClick"
    >
      <div class="custom-tree-node betweenbox" slot-scope="{ node }">
        <div>
          <span>{{ node.label }}</span>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";
@Component
export default class extends Vue {
  defaultProps: Object = {
    label: "name",
  };
  $refs!: {
    tree: Tree;
  };
  // 选择的树图内容
  changeTreeArr: any[] = [];
  // 树图加载
  loadNode(node, resolve) {
    let params: any;
    if (node.level > 0) {
      let data = node.data;
      params = {
        id: data.id,
        type: data.type,
      };
    }

    (this as any).$services
      .confTree({ data: params })
      .then((result: any) => {
        let data = result.data;
        // 可以选择的类型
        let typeObj = {
          yzw: true,
          video: true,
        };
        data.forEach((item) => {
          let type = item.type;
          item.disabled = !typeObj[type];
        });
        resolve(data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 树图点击事件
  handleNodeClick(data: Object) {
    this.$emit("handleNodeClick", data);
  }
  handleNodeChange(data) {
    let checkedArr = this.$refs.tree.getCheckedNodes()
    this.$emit('handleNodeChange',checkedArr)
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
}
</style>

